<template>
	<view class="box">
		<view class="title">
			<view class="flex flex-ai-c text">
				<view class="first">
					<image src="https://files.yzsheng.com/goodimg/brandimg/289.png"></image>
				</view>
				<view style="width: 80%;">{{info.carTypeName}} {{info.configurationName}}</view>
			</view>
			<view class="text flex flex-ai-c">
				<view class="first">车牌：</view>
				<view>{{info.plateNumber}}</view>
			</view>
			<view class="text flex flex-ai-c">
				<view class="first">VIN：</view>
				<view>{{info.vin}}</view>
			</view>
		</view>

		<view style="position: relative;bottom: 165rpx;">
			<!-- 用户信息 -->
			<view class="info">
				<view class="flex flex-ai-c">
					<view class="info-title">客户姓名：</view>
					<view>{{info.userName}}</view>
				</view>
				<view class="flex flex-jc-sb" style="position: relative;">
					<view class="flex flex-ai-c" style="width: 100%;">
						<view class="info-title">联系电话：</view>
						<view>{{info.userMobile}}</view>
					</view>
					<view style="position: absolute;right: 22rpx;" @click="phone(info.userMobile)">
						<i-icon icon='icon76' size='50rpx' color='rgb(251,176,0)'></i-icon>
					</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="info-title">预约时间：</view>
					<view>{{returnTime(info.arriveTime)}}</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="info-title">预约类型：</view>
					<view>{{info.serviceType | formatStoreType}}</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="info-title">服务项目：</view>
					<view>{{info.serviceProject}}</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="info-title">预约门店：</view>
					<view>{{info.arriveStore}}</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="info-title">渠道：</view>
					<view>{{info.inviteName || '无推荐'}}</view>
				</view>
			</view>
			<view class="info-2 flex flex-jc-sb flex-ai-c" @click="goDetail(1)">
				<view>关联订单</view>
				<view>
					<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 服务记录 -->
			<view class="serve">
				<view class="serve-title">服务记录</view>
				<view class="flex">
					<!-- 线条 -->
					<view v-if="info.cancel_time!=='0001-01-01T00:00:00' && info.arriveTime!=='0001-01-01T00:00:00'" class="flex flex-dir-c flex-ai-c" style="margin-right: 19rpx;margin-top: 40rpx;">
						<view class="circular"></view>
						<view>
							<u-line border-style="dashed" color="#E1E1E1" :hair-line="false" direction="col"
								length="177rpx"></u-line>
						</view>
						<view class="circular" style="background-color: #E1E1E1;"></view>
					</view>
					<view>
						  
						<view class="serve-record" style="font-size: 24rpx;" v-if="info.cancel_time!=='0001-01-01T00:00:00'">
							<view>安装预约订单</view>
							<view>取消订单：{{info.order_no}}</view>
							<view style="color: #999999;">{{returnTime(info.cancel_time)}}</view>
						</view>
						<view class="serve-record" v-if="info.arriveTime!=='0001-01-01T00:00:00'" :style="{'color':info.cancel_time!=='0001-01-01T00:00:00'?'#999999':'#333333'}" style="border: 0;font-size: 24rpx;">
							<view>客户（张三）预约登记</view>
							<view>预约时间：{{returnTime(info.arriveTime)}}</view>
							<view>{{returnTime(info.addtime)}}</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="footer flex flex-jc-fe flex-ai-c" v-if="!info.arriveId">
				<view class="btn flex flex-jc-c flex-ai-c" @click="create">
					创建到店记录
				</view>
			</view>
			<view class="footer flex flex-jc-fe flex-ai-c" v-if="info.arriveId && info.arriveStatus!==10">
				<view class="btn flex flex-jc-c flex-ai-c" @click="goDetail(0)">
					查看到店记录
				</view>
			</view>
		</view>
		<!-- 弹框提示 -->
		<u-popup v-model="tipShow" mode="center" :mask="false" width="540">
		  <view class="popup-content">
		    <view class="titles">温馨提示</view>
		    <view class="content"
		      >您的门店无该车辆到店记录和订单， 请通过手机号码创建到店记录</view
		    >
		    <view class="btn-box" @click="okey()">
					我知道了
		    </view>
		  </view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				info: '',
				tipShow: false,
				arriveId:''
			}
		},
		onLoad(op) {
			this.orderId = op.id
			this.arriveId = op.arriveId
		},
		created() {
			this.getBookingManagementDetail()
		},
		filters: {
			filterTel(tel) {
				let reg = /^(\d{3})\d*(\d{4})$/
				return tel.replace(reg, '$1****$2')
			},
			formatStoreType(data) {
				let text = ''
				switch (Number(data)) {
					case 0:
						text = '客户端订单'
						break
					case 1:
						text = '技师保养订单'
						break
					case 2:
						text = '技师洗车订单'
						break
					case 3:
						text = '技师美容订单'
						break
					case 4:
						text = '技师轮胎订单'
						break
					case 5:
						text = '全车适配订单'
						break
					default:
						text = ''
						break
				}
				return text
			}
		},
		methods: {
			returnTime(time) {
			  if (time) {
			    return time.split('T')[0] + ' ' + time.split('T')[1]
			  }
			},
			// 点击温馨提示的我知道了按钮
			okey() {
			  this.tipShow = false
			  this.info.order_no = ''
			  uni.navigateTo({
			    url: '/pages_afterSales/createToStoreRecord/createToStoreRecord',
			  })
			},
			create(){
				this.$api.afterSales
				  .getArrivalInfo({
				    orderNo: this.info.order_no,
				  })
				  .then((res) => {
				    console.log(res)
				    if (res.data.userInfo) {
				      this.$store.commit('afterSales/setUserInfo', res.data.userInfo)
				    }
				    this.$store.commit('afterSales/setServeAndQueue', {
				      service: res.data.service,
				      queue: res.data.queue,
				    })
				    if (res.data.carList.length) {
				      this.$store.commit('afterSales/setArrivalCar', res.data.carList[0])
				      this.$store.commit('afterSales/setCarList', res.data.carList)
				    }
				    if (res.data.userInfo && res.data.userInfo.orderCount > 0) {
				      this.info.order_no = ''
				      uni.navigateTo({
				        url:'/pages_afterSales/createToStoreRecord/createToStoreRecord?isPackage=0',
				      })
				    } else {
				      this.tipShow = true
				    }
				  })
			},
			phone(num) {
			  uni.makePhoneCall({
			    phoneNumber: num
			  })
			},
			goDetail(num){
				if(num===1){
					uni.navigateTo({
						url:'/pages_afterSales/order/orderDetail/orderDetail?id='+this.orderId
					})
				}else{
					uni.navigateTo({
						url:'/pages_afterSales/arrivalRecordDeatil/arrivalRecordDeatil?id='+this.info.arriveId
					})
				}
				
				
			},
			async getBookingManagementDetail() {
				try {
					let data = {
						'orderId': this.orderId,
						'arriveId':this.arriveId==='null'?null:this.arriveId
					}
					const res = await this.$api.common.getBookingManagementDetail(data)
					this.info = res.data
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./bookingDetails.scss";
</style>
